<template>
  <!-- 如果有子级 -->
  <div class="menuItemWarp">
    <template v-if="route.children && route.children.length > 0">
      <!-- 如果子级只有一个，默认子级替代父级当作菜单，除了强制设置alwaysShowInSidebar显示除外。或者是没有设置meta.title的也不显示 -->
      <template v-if="route.children.length == 1 && !route.alwaysShowInSidebar">
        <template
          v-if="
            route.children[0].children && route.children[0].children.length > 0
          "
        >
          <el-submenu :index="resolvePath(route.children[0].path)">
            <template slot="title">
              <i
                v-if="route.children[0].meta && route.children[0].meta.icon"
                :class="route.children[0].meta.icon"
              ></i>
              <span>{{
                route.children[0].meta && route.children[0].meta.title
                  ? route.children[0].meta.title
                  : ""
              }}</span>
            </template>
            <el-menu-item-group>
              <menu-item
                v-for="routeChildItem in route.children[0].children"
                :key="routeChildItem.path"
                :base-path="route.children[0].path"
                :route="routeChildItem"
              />
            </el-menu-item-group>
          </el-submenu>
        </template>
        <template v-else>
          <el-menu-item
            v-if="
              route.children[0].showInsidebar !== false &&
                route.children[0].meta &&
                route.children[0].meta.title
            "
            :index="resolvePath(route.children[0].path)"
            :route="{ name: route.children[0].name }"
          >
            <i
              v-if="route.children[0].meta && route.children[0].meta.icon"
              :class="route.children[0].meta.icon"
            ></i>
            <span slot="title">{{
              route.children[0].meta && route.children[0].meta.title
                ? route.children[0].meta.title
                : ""
            }}</span>
          </el-menu-item>
        </template>
      </template>
      <el-submenu v-else :index="resolvePath(route.path)">
        <template slot="title">
          <i v-if="route.meta && route.meta.icon" :class="route.meta.icon"></i>
          <span>{{
            route.meta && route.meta.title ? route.meta.title : ""
          }}</span>
        </template>
        <el-menu-item-group>
          <menu-item
            v-for="routeItem in route.children"
            :key="routeItem.path"
            :base-path="route.path"
            :route="routeItem"
          />
        </el-menu-item-group>
      </el-submenu>
    </template>

    <template v-else>
      <!-- 只有一个子级的，且不能设置showInsidebar为false的且必须有meata.title -->
      <el-menu-item
        v-if="route.showInsidebar !== false && route.meta && route.meta.title"
        :index="resolvePath(route.path)"
        :route="{ name: route.name }"
      >
        <i :class="route.meta.icon" v-if="route.meta && route.meta.icon"></i>
        <span slot="title">{{
          route.meta && route.meta.title ? route.meta.title : ""
        }}</span>
      </el-menu-item>
    </template>
  </div>
</template>

<script>
import path from "path";
// import menuTitleItem from './elMenuTitleItem'
import menuItem from "./menuItem";
// import linkType from './linkType'
// import FixiOSBug from './FixiOSBug'
export default {
  name: "menuItem",
  components: { menuItem },
  // mixins: [FixiOSBug],
  props: {
    // route object
    route: {
      type: Object
      //required: true
    },
    // isNest: {
    //   type: Boolean,
    //   default: false
    // },
    basePath: {
      type: String,
      default: ""
    }
  },
  data() {
    // To fix https://github.com/PanJiaChen/vue-admin-template/issues/237
    // TODO: refactor with render function
    //this.onlyOneChild = null
    return {};
  },
  watch: {
    data() {
      // console.log('this', this)
    }
  },
  methods: {
    resolvePath(routePath) {
      // if (isExternal(routePath)) {
      //   return routePath
      // }
      // if (isExternal(this.basePath)) {
      //   return this.basePath
      // }
      // console.log('this.basePath, routePath: ', this.basePath, routePath, path.resolve(this.basePath, routePath))
      if (/^\//.test(routePath)) {
        return routePath;
      }
      return path.resolve(this.basePath, routePath);
    }
    // hasOneShowingChild(children = [], parent) {
    //   const showingChildren = children.filter(item => {
    //     if (item.hidden) {
    //       return false
    //     } else {
    //       // Temp set(will be used if only has one showing child)
    //       this.onlyOneChild = item
    //       return true
    //     }
    //   })
    //   // When there is only one child router, the child router is displayed by default
    //   if (showingChildren.length === 1) {
    //     return true
    //   }
    //   // Show parent if there are no child router to display
    //   if (showingChildren.length === 0) {
    //     this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
    //     return true
    //   }
    //   return false
    // },
    // resolvePath(routePath) {
    //   let _that = this;
    //
    //   if (_that.isExternal(routePath)) {
    //     return routePath
    //   }
    //   if (_that.isExternal(this.basePath)) {
    //     return this.basePath
    //   }
    //   return path.resolve(this.basePath, routePath)
    // },
    // isExternal(path) {
    //   return /^(https?:|mailto:|tel:)/.test(path)
    // }
  }
};
</script>
